import 'package:flutter/material.dart';
import 'package:t_flutter_test/component/common_button.dart';
import 'package:t_flutter_test/component/common_item.dart';
import 'package:t_flutter_test/component/layout_widget.dart';
import 'package:t_flutter_test/contants/index.dart' show BtnItem, IndexValue;

class File07 extends StatefulWidget {
  const File07({super.key});

  @override
  File07State createState() => File07State();
}

class File07State extends State<File07> {
  final List<CustomCommonItem> list = [
    CustomCommonItem(color: Colors.blue, text: '1'),
    CustomCommonItem(color: Colors.pink, text: '2'),
    CustomCommonItem(color: Colors.teal, text: '3'),
    CustomCommonItem(color: Colors.green, text: '4'),
    CustomCommonItem(color: Colors.cyan, text: '5'),
    CustomCommonItem(color: Colors.orange, text: '6'),
    CustomCommonItem(color: Colors.blue, text: '7'),
    CustomCommonItem(color: Colors.green, text: '8'),
    CustomCommonItem(color: Colors.red, text: '9'),
    CustomCommonItem(color: Colors.purple, text: '10'),
    CustomCommonItem(color: Colors.yellow, text: '11'),
    CustomCommonItem(color: Colors.brown, text: '12'),
    CustomCommonItem(color: Colors.indigo, text: '13'),
    CustomCommonItem(color: Colors.deepPurple, text: '14'),
    CustomCommonItem(color: Colors.lime, text: '15'),
    CustomCommonItem(color: Colors.deepOrange, text: '16'),
  ];

  final List<BtnItem> btnList = [
    BtnItem(text: '普通列表', index: IndexValue.one),
    BtnItem(text: 'builder列表', index: IndexValue.two),
    BtnItem(text: 'extent列表', index: IndexValue.three),
  ];

  // 展示的内容
  IndexValue showIndex = IndexValue.one;

  @override
  Widget build(BuildContext context) {
    return LayoutWidget(
      body: Container(
        padding: EdgeInsets.only(top: 10),
        child: Column(
          spacing: 10,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children:
                  btnList.map((item) {
                    return CommonButton(
                      onPressed: () {
                        setState(() {
                          showIndex = item.index;
                        });
                      },
                      child: Text(item.text),
                    );
                  }).toList(),
            ),
            Expanded(
              child: IndexedStack(
                index: showIndex.index,
                children: [
                  File07GeneralGrid(list: list),
                  File07BuilderGrid(list: list),
                  File07ExtentGrid(list: list),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 普通列表
class File07GeneralGrid extends StatelessWidget {
  const File07GeneralGrid({super.key, this.list = const []});

  final List<CustomCommonItem> list;

  @override
  Widget build(BuildContext context) {
    return GridView(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
        mainAxisSpacing: 10, // 1.2 主轴(垂直)方向子元素间距
        crossAxisSpacing: 10, // 1.3 侧轴(水平)方向子元素间距
        childAspectRatio: 4 / 3, // 1.4 子元素宽高比，默认宽高相同 1: 1
      ),
      children: list.map((item) => CommonItem(item: item)).toList(),
    );
  }
}

// builder列表
class File07BuilderGrid extends StatelessWidget {
  const File07BuilderGrid({super.key, this.list = const []});

  final List<CustomCommonItem> list;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
        mainAxisSpacing: 12, // 1.2 主轴(垂直)方向子元素间距
        crossAxisSpacing: 12, // 1.3 侧轴(水平)方向子元素间距
        childAspectRatio: 4 / 3, // 1.4 子元素宽高比，默认宽高相同 1: 1
      ),
      itemBuilder: (context, index) => CommonItem(item: list[index]),
      itemCount: list.length,
    );
  }
}

// 可设置最大子元素宽度的 GridView.extent
class File07ExtentGrid extends StatelessWidget {
  const File07ExtentGrid({super.key, this.list = const []});

  final List<CustomCommonItem> list;
  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 100, // 最大子元素宽度
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      children: list.map((item) => CommonItem(item: item)).toList(),
    );
  }
}
